function Page(el, options = {}) {
    /* options{
        pageTag: {
            first: '首页',
            prev: '上一页',
            list: null,     // 后期放分页页码 
            next: '下一页',
            last: '末页',
        },
        pageInfo: {// 分页页码的数据
            pageNum: 2,     // 当前页数
            pageSize: 10,    // 每页显示条数
            totalData: 1000, // 总条数
            totalPage: 100,  // 总页数 = 向上取整（总条数 / 每页显示条数）
        }} */
    this.el = document.querySelector(el)

    this.options = options
    this.init()
}

Page.prototype.init = function () {
    //父元素的样式
    this.parentTag()
    this.createIag()
    this.bindEvent()
}
Page.prototype.createIag = function () {
    this.el.innerHTML = ''
    let pageTag = this.options.pageTag
    //根据第二个实参中的pageTag键
    for (let key in pageTag) {
        // key：first,prev,list,next,last
        //innerText：
        console.log(key, pageTag[key]);
        //创建p标签对象
        let pObj = document.createElement('p')
        pObj.innerText = pageTag[key]
        pObj.style.border = '1px solid black'
        pObj.style.margin = '0 5px'
        pObj.style.display = 'inline-block'
        this.el.appendChild(pObj)

    }
    this.createNum()
}
Page.prototype.parentTag = function () {
    this.el.style.display = 'flex'
    this.el.style.justifyContent = 'center'
    this.el.style.alignItems = 'center'
}
Page.prototype.createNum = function () {
    //分页标签
    let tag3Obj = this.el.querySelector('p:nth-child(3)')
    tag3Obj.style.border = 'none'
    tag3Obj.style.padding = '0'
    tag3Obj.style.margin = '0'
    // for(let i =1;i<6;i++){
    //     this.createP(tag3Obj,i,'p')

    // }
    // 1 2 3 4 5 ... 99 100  	     pageNum < 5
    // 1 2 3 4 5 6 7 ... 99 100     pageNum == 5
    // 1 2 ... 4 5 6 7 8 .. 99 100  pageNum > 5 && pageNum < 总页数-4
    // 1 2 ... 96 97 98 99 100      pageNum >= 总页数-4

    let pageNum = this.options.pageInfo.pageNum
    this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
    let totalPage = this.options.pageInfo.totalPage

    //判断
    if (pageNum < 5) {
        for (let i = 1; i <= 5; i++)
            this.createP(tag3Obj, i, 'p')
        this.createP(tag3Obj, '...', 'p')
        this.createP(tag3Obj, totalPage - 1, 'p')
        this.createP(tag3Obj, totalPage, 'p')
    } else if (pageNum == 5) {
        for (let i = 1; i <= 7; i++)
            this.createP(tag3Obj, i, 'p')
        this.createP(tag3Obj, '...', 'p')
        this.createP(tag3Obj, totalPage - 1, 'p')
        this.createP(tag3Obj, totalPage, 'p')
    } else if (pageNum > 5 && pageNum < totalPage - 4) {
        for (let i = 1; i <= 2; i++)
            this.createP(tag3Obj, i, 'p')
        this.createP(tag3Obj, '...', 'p')
        this.createP(tag3Obj, pageNum - 2, 'p')
        this.createP(tag3Obj, pageNum - 1, 'p')
        this.createP(tag3Obj, pageNum, 'p')
        this.createP(tag3Obj, pageNum + 1, 'p')
        this.createP(tag3Obj, pageNum + 2, 'p')
        this.createP(tag3Obj, '...', 'p')
        this.createP(tag3Obj, totalPage - 1, 'p')
        this.createP(tag3Obj, totalPage, 'p')
    } else if (pageNum >= totalPage - 4) {
        for (let i = 1; i <= 2; i++)
            this.createP(tag3Obj, i, 'p')
        this.createP(tag3Obj, '...', 'p')
        this.createP(tag3Obj, totalPage - 4, 'p')
        this.createP(tag3Obj, totalPage - 3, 'p')
        this.createP(tag3Obj, totalPage - 2, 'p')
        this.createP(tag3Obj, totalPage - 1, 'p')
        this.createP(tag3Obj, totalPage, 'p')
    }

}
Page.prototype.createP = function (tag3Obj, content, p) {
    let pObj = document.createElement(p)
    pObj.innerText = content
    pObj.style.margin = '0 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'
    pObj.style.border = '1px solid black'
    //当PageInfo中的pagenum和当前content相同时，背景颜色就改变
    if (content == this.options.pageInfo.pageNum)
        pObj.style.backgroundColor = 'orange'
    tag3Obj.appendChild(pObj)

}
Page.prototype.bindEvent = function () {
    this.el.onclick = (e) => {
        let evt = e || window.event
        let target = evt.target || evt.srcElement
        //    console.log(target.innerText);
        //   console.log(this.options.pageTag.prev);
        //   console.log(target.innerText );
        if (target.nodeName === 'P') {
            // target.innerText === 首页/first   this.options.pageTag.first  
            // target.innerText === 上一页/prev  this.options.pageTag.prev
            // target.innerText === 下一页/next  this.options.pageTag.next
            // target.innerText === 末页/last    this.options.pageTag.last
            // target.innerText === ... 不管
            // target.innerText === 数字    !== ... 就是数字
            //  console.log(target.nodeName);

            switch (target.innerText) {
                case this.options.pageTag.first:
                    this.options.pageInfo.pageNum = 1
                    break;
                case this.options.pageTag.prev:
                    // 留心：最少是第一页
                    if (this.options.pageInfo.pageNum == 1) return
                    this.options.pageInfo.pageNum--
                    break;
                case this.options.pageTag.next:
                    if (this.options.pageInfo.pageNum == this.options.pageInfo.totalData / this.options.pageInfo.pageSize) return
                    this.options.pageInfo.pageNum++
                    break;
                case this.options.pageTag.last:
                    this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
                    break;
                default:
                    if (parseInt(target.innerHTML) > 0)
                        this.options.pageInfo.pageNum = parseInt(target.innerHTML)
                    break;

            }
            this.createIag()
            this.options.callback(this.options.pageInfo.pageNum)
        }

        


    }
}
